window.onload = function() {
  var box = document.getElementById('divselect'),
    title = box.getElementsByTagName('cite')[0],
    menu = box.getElementsByTagName('ul')[0],
    as = box.getElementsByTagName('a'), //所有的li标签，数组
    index = -1;

  // 点击三角时
  title.onclick = function(event) {
    /*var event = event || window.event;
      //阻止事件冒泡
      if (event.stopPropagation) {
        event.stopPropagation;
      } else {
        event.cancelBubble = true;
      }
*/

    event = event || window.event;
    //阻止事件冒泡
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
    //显示ul
    menu.style.display = "block";

    //接下来，将要执行键盘事件
    document.onkeyup = function(event) {
      event = event || window.event;
      //清除li中a标签的默认格式
      for (var i = 0; i < as.length; i++) {
        as[i].style.background = "none";
      }
      //按键：下
      if (event.keyCode == 40) {
        index++;
        if (index >= as.length) {
          index = 0;
        }
        as[index].style.background = "#fcc";
      }
      //按键：上
      if (event.keyCode == 38) {
        if (index <= 0) {
          index = as.length;
        } else {
          index--;
          as[index].style.background = "#fcc";
        }

      }

      //按键：回车
      if (event.keyCode == 13 && index != -1) {
        title.innerHTML = as[index].innerHTML;
        for (var i = 0; i < as.length; i++) {
          as[i].style.background = 'none';
        }
        menu.style.display = "none";
        index = -1;
      }

    }
  }

  // 滑过滑过、离开、点击每个选项时
  for (var i = 0; i < as.length; i++) {
    as[i].onmouseover = function() {
      this.style.background = '#ccc';
    }
    as[i].onmouseout = function() {
      this.style.background = 'none';
    }
    as[i].onclick = function() {
      title.innerHTML = this.innerHTML;
      // menu.style.display = "none";
    }
  }

  // 点击页面空白处时
  document.onclick = function() {


    menu.style.display = "none";
    console.log("what!");
  }

  /* var _flag = false; // 全局变量，用于记住鼠标是否在DIV上
document.getElementById('div').onmouseover = function (){
    _flag = true;
};
 
document.getElementById('div').onmouseout = function (){
    _flag = false;
};
 
document.body.onclick = function (){
    if(_flag){
        //不隐藏DIV
    }else{
        // 隐藏DIV
    }
};*/
}